<template>
	<view class="list-search">
		<input class='search__text' :style="{'height':height+'rpx','border-radius':height+'rpx','background-color':bgColor,'font-size': fontSize+'rpx'}" v-model="keyword" confirm-type="search" @confirm="searchSubmit"
		 :placeholder="placeholder" placeholder-class='search__text-s' @focus="search">
			<view class="search-icon iconfont" @click="searchSubmit">&#xe686;</view>
		</input>
	</view>
</template>

<script>
	/**
	 * 头部搜索（重写了下，旁边那个搜索组件有fixed定位不好用）
	 * @property {String} bgColor input的背景色
	 * @property {Number} height input高度
	 */
	export default {
		name: 'stReSearch',
		props: {
			value:{
				type: String,
				default: ''
			},
			placeholder:{
				type: String,
				default: '搜索关键词'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			height: {
				type: Number,
				default: 60
			},
			fontSize: {
				type: Number,
				default: 24
			}
		},
		data() {
			return {
				keyword:this.value
			};
		},
		methods: {
			searchSubmit(){
				this.$emit('searchSubmit', this.keyword); 
			},
			search(){
				this.$emit('search');
			}
		}
	}
</script>

<style lang="scss">
	.list-search {
		position: relative;
		width: 100%;
		.search__text {
			display: block;
			padding: 0 100rpx 0 30rpx;
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
		}

		.search__text-s {
			color: $uni-text-color-placeholder;
		}

		.search-icon {
			display: flex;
			align-items: center;
			position: absolute;
			right: 6rpx;
			top: 0;
			bottom: 0;
			padding: 0 20rpx;
			z-index: 101;
			color: #c0c0c0;
		}
	}
</style>
